<template>
	<view class="maps-container">
		<map class="tui-map" :latitude="lat" :longitude="lng" :markers="covers" :scale="12" show-location></map>
		<scroll-view scroll-y class="scrollView" :style="{height:scrollH +'px'}">
			<view class="tui-list">
				<view class="tui-list-cell" :class="[index==stores.length-1?'tui-cell-last':'']" v-for="(item,index) in stores"
				 :key="index">
					<view class="addr-title">
						<text>{{item.storeName}}</text>
					</view>
					<view class="addr-box ">
						<view class="addr-detail">
							<view class="addr-detail-item">
								<tui-icon name="position" :size="14" color="#999"></tui-icon>
								<text class="tui-pl">{{item.addressDetail}}</text>
							</view>
							<view class="addr-detail-item">
								<tui-icon name="time" :size="14" color="#999"></tui-icon>
								<text class="tui-pl">{{item.storeOfficeTime}}</text>
							</view>
						</view>
						<view class="addr-opera">
							<view class="opera-box " hover-class="tui-opcity" :hover-stay-time="150 " @tap="go" :data-store="item">
								<text class="opera-btn">去下单</text>
								<text class="opera-distance">距离{{item.distance}}km</text>
							</view>
						</view>
					</view>
				</view>
				<tui-loadmore :index="3" v-if="loading"></tui-loadmore>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getList
	} from "@/api/store";
	import {
		mapGetters,
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				lat: '',
				lng: '',
				covers: [],
				scrollH: 260,
				loading: true,
				localCity: '',
				stores: []
			}
		},
		onLoad(options) {
			setTimeout(() => {
				let winHeight = uni.getSystemInfoSync().windowHeight;
				this.scrollH = winHeight - uni.upx2px(600);
				if (this.currentLocation.isDefault) {
					this.getCurrentLocation().then(() => {
						this.lat = this.currentLocation.latitude;
						this.lng = this.currentLocation.longitude;
						this.localCity = this.currentLocation.localCity;
						this.getStores();
					}).catch(error => {
						this.loading = false;
						uni.showToast({
							title: "获取位置信息失败，请检查是否打开位置权限",
							icon: 'none',
							duration: 2000
						})
					})
				} else {
					this.lat = this.currentLocation.latitude;
					this.lng = this.currentLocation.longitude;
					this.localCity = this.currentLocation.localCity;
					this.getStores();
				}

			}, 50)
		},
		computed: {
			...mapGetters(['currentLocation'])
		},
		methods: {
			...mapActions(['getCurrentLocation']),

			getStores() {
				let that = this;
				getList(this.lat, this.lng).then(res => {
					that.stores = res.data;
					that.buildMarkers();
				}, error => {
					this.loading = false;
				});
			},
			buildMarkers() {

				for (let [index, item] of this.stores.entries()) {
					this.covers.push({
						id: index,
						latitude: item.latitude,
						longitude: item.longitude,
						title: item.storeName,
						iconPath: "/static/images/store/location.png",
						width: 40,
						height: 40
					});
				}
				this.loading = false;
			},
			go(event) {
				const store = event.currentTarget.dataset.store;

				//返回并刷新上一页面
				this.$eventHub.$emit('emit', store)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.tui-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 30rpx;
	}

	.tui-cell-last::after {
		border-bottom: 0;
	}

	.maps-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.tui-map {
		width: 100%;
		height: 600rpx;
		display: block;
	}

	.scrollView {
		width: 100%;
		/* padding-bottom: 100rpx; */
		background-color: #fff;
	}

	.tui-list-cell {
		display: initial;
		padding: 30rpx;
	}

	.addr-title {
		font-size: 30rpx;
		line-height: 40rpx;
		color: #000;
		font-weight: bold;
		width: 100%;
		padding-bottom: 20rpx;
	}

	.addr-box {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.addr-detail {
		width: 450rpx;
	}

	.addr-detail-item {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		align-items: center;
		justify-content: space-between;
		-webkit-line-clamp: 2;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */

	}

	.tui-pl {
		padding-left: 4rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		color: #727272;
	}

	.addr-opera {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.opera-box {
		text-align: center;
	}

	.opera-distance {
		color: #999;
		font-size: 18rpx;
		line-height: 24rpx;
	}

	.opera-btn {
		color: #333;
		display: block;
		font-size: 30rpx;
		line-height: 40rpx;
	}
</style>
